<template>
  <div class="app">
    <!-- 背景视频 -->
    <video
      calss="bgvideo"
      autoplay
      muted
      loop
      src="@/assets/video/bgvideo.mp4"
    ></video>
    <!-- 背景图片 -->
    <div class="bg"></div>
    <div class="conterLogin">
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-loginForm"
      >
        <!-- 千锋管理系统 -->
        <!-- <div class="bg" background="@/assets/video/bg2.png"></div>  -->
        <h1 class="title">请登入系统</h1>

        <!-- <i :class="['jiaobiao','iconfont','.icon-erweimajiaobiao']"></i> -->
        <!-- 电脑角标：diannaojiaobiao  二维码角标：erweimajiaobiao  因为需要用条件控制，故用中括号，放到计算属性中进行更换(动态的：jiaobiaotype），-->
        <i
          :class="['jiaobiao', 'iconfont', jiaobiaoType]"
          @click="changeLoginType"
        ></i>

        <!-- 常规账户登录页面 -->
        <userLogin
          ref="userLogin"
          @syncLoginForm="handleSyncLoginForm"
          @submit="submit"
          v-if="loginType === 'common'"
          @changeSmsType="changeSmsType"
        ></userLogin>

        <!-- 二维码登录页面 -->
        <qrLogin
          :storageUserInfo="storageUserInfo"
          v-else-if="loginType === 'qrcode'"
        ></qrLogin>

        <!-- 手机号短信验证登录页面 -->
        <smsLogin :storageUserInfo="storageUserInfo" v-else></smsLogin>
      </el-form>
    </div>
  </div>
</template>

<script>
import userLogin from "@/components/Login/userLogin.vue";
import smsLogin from "@/components/Login/smsLogin";
import qrLogin from "@/components/Login/qrLogin";
import * as api from "@/api/users";
import storage from "@/utils/storage";

//校验验证码
var validateCaptcha = (rule, value, callback) => {
  if (value.length === 5) {
    callback();
  } else {
    callback("请正确输入验证码");
  }
};
//校验用户名
var validateUsername = (rule, value, callback) => {
  // console.log(rule);
  // console.log(value);
  //用户名正则，3到16位（字母数字下划线和减号）
  let uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  // 如果校验通过要直接回调callback()
  // 如果校验不通过 callback中传参数
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("3到16位字母数字下划线和减号");
  }
};
//校验密码
var validatePassword = (rule, value, callback) => {
  // let pwd = value("请出入密码")
  // 密码至少包含 数字和英文，长度3-20
  let pwdPattern = /[0-9A-Za-z]{3,16}$/;

  if (pwdPattern.test(value)) {
    callback();
  } else {
    callback("密码长度3-20 包含 数字和英文");
  }
};

export default {
  data() {
    return {
      //common:常规  | qrcode:二维码 | sms:短信验证码
      loginType: "common", //登录方式
      loginForm: {
        //登入输入的数据
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  mounted() {},
  //计算属性
  computed: {
    jiaobiaoType() {
      if (this.loginType === "common") {
        return "icon-erweimajiaobiao";
      }
      if (this.loginType === "qrcode" || this.loginType === "sms") {
        return "icon-diannaojiaobiao";
      }
    },
  },
  methods: {
    //短信登录方式的变更
    changeSmsType() {
      this.loginType = "sms";
    },
    //更改登陆方式
    changeLoginType() {
      console.log(111);
      if (this.loginType === "common") {
        console.log(222);
        this.loginType = "qrcode";
      } else if (this.loginType === "qrcode") {
        console.log(333);
        this.loginType = "common";
      } else if (this.loginType === "sms") {
        this.loginType = "common";
      }
    },
    handleSyncLoginForm(newLoginForm) {
      // console.log(newLoginForm)
      this.loginForm = newLoginForm;
    },
    //表单提交
    submit() {
      // console.log('222');
      // console.log(this.$refs);
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          //登录逻辑：1.获取后台验证码；2.进行本地校验；3.本地校验通过后=>先校验验证码；4.验证码通过再校验用户名和密码 ；5.返回成功和失败
          //本地校验通过
          // alert('submit!');
          api.verifyCaptcha(this.loginForm.captcha).then(async (res) => {
            // console.log(res)
            if (res.data.state) {
              //验证码通过，校验用户名和密码
              let { username, password } = this.loginForm;
              let res = await api.loginApi(username, password);

              // console.log(res)
              //登录成功
              if (res.data.state) {
                //存储 用户信息到本地
                this.storageUserInfo(res.data);
                //跳转到主页
                this.$router.push("/home");
              }
            } else {
              //验证码不通过，刷新验证码
              this.$refs["userLogin"].getCaptcha();
            }
          });
        } else {
          //本地校验不通过
          console.log("error submit!!");
          return false;
        }
      });
    },
    //封装方法：用户信息 和 token 的存储
    storageUserInfo({ userInfo, token, permission }) {
      storage.set("userInfo", userInfo);
      // let r = storage.get('userInfo')
      // console.log(r)
      storage.set("qf-token", token);
      storage.set("permission", permission);
    },
  },

  components: {
    userLogin,
    smsLogin,
    qrLogin,
  },
};
</script>

<style lang="less" scoped>
// 修改element-ui的样式，
// 1.打开调试器，找准类名，覆盖样式
// 2.看权重，使用！important或者自己计算权重
// 3.使用深度选择器，>>>或者/deep/或者v::deep

.demo-loginForm {
  background: rgba(226, 131, 163, 0.3);
  // border:1px solid rgba(0, 0, 0, .3);
  border-radius: 8px;
  width: 380px;
  height: 600px;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;

  /deep/ h1 {
    position: fixed;
    top: 142px;
    text-align: center;
  }
  .jiaobiao {
    font-size: 60px;
    width: 50px;
    height: 50px;
    color: #fff;
    position: absolute;
    right: 9px;
    top: -1px;
    cursor: pointer; //移入鼠标后光标不变，贴右上角边的时候会显示
    opacity: 0.7;
  }
}

.app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.bg {
  background-image: url(./../../assets/video/bg2.png);
  background-repeat: no-repeat;
  position: fixed;
  width: 20%;
  height: 40%;
  background-size: 100% 100%;
  left: 14%;
  top: 38%;
  opacity: 0.5;
}
</style>
